<!--
* @author: Jay
* @description: 动态修改主题色
* @createTime: 2022-12-12 14:55:31
 -->
<template>
    <view class="conter" :style="{'--page-bg':pageBg}">
        <view class="padding margin-bottom-xl css-theme" :class="[cueTheme]">
            <view class="text-lg text-center text-bold">
                暗黑模式
            </view>
            <view class="margin-top-sm" @click="openDoc">
                uni-app的暗黑模式。<text class="text-blue">点击查看官方文档</text>
            </view>
        </view>
 
        <view class="css-theme padding" :class="[cueTheme]">
            <view class="text-center text-bold text-lg">
                通过判断css 名字修改主题!!!
            </view>
            <view class="margin-tb-sm text-lg text-center">
                当前主题:{{cueTheme}}
            </view>
            <view class="margin-tb-sm text-lg text-center">
                当前页面背景色:{{pageBg}}
            </view>
            <view class="flex align-center justify-around">
                <button class="cu-btn round" @click="cssEditThemeBut('day-theme')">白天</button>
                <button class="cu-btn round" @click="cssEditThemeBut('night-theme')">黑夜</button>
                <button class="cu-btn round" @click="cssEditThemeBut('jade-theme')">玉红</button>
            </view>
        </view>
 
        <view class="padding margin-top-xl" :data-theme="cueTheme">
            <view class="text-center text-bold text-lg">
                通过 data-theme 判断 名字修改主题!!!
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                url: 'https://uniapp.dcloud.net.cn/tutorial/darkmode.html#open-darkmode'
            };
        },
        onLoad() {
            console.log("当前主题:", this.cueTheme);
        },
        onShow() {},
        methods: {
            cssEditThemeBut(e) {
                //修改主题
                this.cueGetTheme(e)
                //设置主题缓存
                this.themeCache(e)
                //设置 全局背景色
                this.getSystemBg()
                // js自改变量值  h5 可用
                // document.getElementsByTagName('body')[0].style.setProperty('--page-bg', 'red');
            },
            openDoc() {
                // #ifdef APP
                plus.runtime.openWeb(this.url);
                // #endif
                // #ifdef H5
                let a = document.createElement('a');
                a.href = this.url;
                a.target = '__blank';
                a.click();
                a = null;
                // #endif
            }
        }
    }
</script>
<style>
    /* 全局背景色 */
    page {
        height: 100%;
    }
</style>
<style lang="scss" scoped>
    // 全局背景色
 //    .conter {
 //        height: 100%;
 //        background-color: $page-bg;
 //    }
 
 //    .css-theme {
 //        // border: 2px solid;
 //        @include text-color();
 //        @include base-background();
 //        @include border-color();
 //        @include shadow-color();
 //    }
</style>